<template lang="pug">
.quality-control
  .quality-control__top
    .quality-control__equipment
      DataPage(
        v-bind="pageProps"
      )
        Table(
          v-bind="tableProps"
        )
    .quality-control__content
      SectionTitle(
        style="background-color: var(--el-color-white);border-bottom: 1px dashed var(--el-border-color);padding-top: 12px;"
        padding="var(--mt-padding-large)"
      ) {{ equipmentName }}
      DataPage
        Table(
          v-bind="packageTableProps"
        )

  .quality-control__items
    WithEmpty(
      :data="currentPackage"
      text="请选择质控包"
    )
      .items
        .items__title
          SectionTitle 测试
        .items__table
          VerifyBinding(
            :current-specimen="currentEquipment"
            :select-equipment="currentPackage"
          )
  EditForm(
    v-bind="editPackageProps"
  )
</template>

<script setup lang="ts">
import {
  DataPage,
  EditForm,
  SectionTitle,
  Table,
  WithEmpty,
} from "@scmt/common-components";
import { useEquipments } from "./composables/equipments";
import { usePackages } from "./composables/packages";
import { useEditPackage } from "./composables/editPackage";
import VerifyBinding from "./compoments/verifyBinding.vue";

const { pageProps, tableProps, getEquipments, currentEquipment } =
  useEquipments();
const {
  tableProps: packageTableProps,
  getPackages,
  currentPackage,
} = usePackages();

const { editFormProps: editPackageProps } = useEditPackage();

const equipmentName = computed(() => currentEquipment.value?.deviceName);

watch(currentEquipment, (equipment) => {
  getPackages({
    deviceId: equipment?.id,
  });
});

onMounted(() => {
  getEquipments();
});
</script>

<style lang="less" scoped>
.quality-control {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;

  &__top {
    flex: 3;

    display: flex;
  }

  &__equipment {
    flex: 2;
    overflow: hidden;
  }

  &__content {
    flex: 3;
    display: flex;
    flex-direction: column;
    margin-left: var(--mt-margin);
    overflow: hidden;
  }

  &__items {
    flex: 2;
  }
}

.items {
  height: 100%;
  display: flex;
  flex-direction: column;
  &__title {
    flex-shrink: 0;
  }

  &__table {
    flex: 1;
    overflow: hidden;
  }
}
</style>
